<template>
	<view class="register">
		<view class="head">
			<image class="photo" :src="imgSrc" @tap="chooseImge"></image>
		</view>
		<view class="content">
			<input class="ipt" type="text" v-model="number" placeholder="手机号" />
			<input class="ipt" type="password" v-model="pwd" placeholder="登录密码" />
			<input class="ipt" type="text" v-model="username" placeholder="用户名" />
			<input class="ipt" type="text" v-model="nickname" placeholder="昵称" />
			<input class="ipt" type="text" v-model="vercode" placeholder="验证码" />
		</view>
		<view class="btn" @tap="addNew">注册</view>
	</view>
</template>

<script>
	import {register} from "../../../api/my/index.js"
	import WxValidate from "../../../utils/validate.js"
	import baseUrl from "../../../api/baseUrl.js"
	export default {
		data() {
			return {
				number: '',
				pwd: '',
				username: '',
				nickname: '',
				vercode: '',
				imgSrc:"../../../static/icons/leju-logo.png"
			};
		},
		methods: {
			initValidate() {
				let rules = {
					number: {
						required: true,
						tel: true
					},
					pwd: {
						required: true,
						minlength: 5
					},
					username: {
						required: true

					},
					nickname: {
						required: true
					},
					vercode: {
						required: true,
						maxlength: 10
					}
				}

				let message = {
					number: {
						required: '请输入手机号',
						tel: '请输入正确的手机号'
					},
					pwd: {
						required: '请输入密码'
					},
					username: {
						required: '请输入用户名'

					},
					nickname: {
						required: '请输入昵称'
					},
					vercode: {
						required: '请输入验证码'
					}
				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},
			// 上传头像
			chooseImge(){
				var _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					success(res){
						var files = res.tempFilePaths[0];
						uni.uploadFile({
							url:baseUrl + "/lejuClient/login/uploadAvatar",
							filePath:files,
							name:'file',
							success(result){
								console.log(result)
								_this.imgSrc = JSON.parse(result.data).data.fileUrl
							}
						})
					}
				})
			},
			addNew() {
				var params = {
					number:this.number,
					pwd:this.pwd,
					username:this.username,
					nickname:this.nickname,
					vercode:this.vercode
				}
				
				if (!this.WxValidate.checkForm(params)) {
					//表单元素验证不通过，此处给出相应提示
					let error = this.WxValidate.errorList[0];
					console.log(error)
					uni.showToast({
						title:error.msg,
						icon:"none"
					})
				}else{
					register(params).then(res=>{
						console.log(res)
						uni.navigateTo({
							url:"/pages/my/login/login"
						})
					})
				}
			},
			onLoad() {
				this.initValidate()
			}

		},
	}
</script>

<style lang="scss" scoped>
	.register {
		height: 100vh;
		background-color: #F1ECE7;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.head {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #000;
			margin-top: 64px;
			margin-bottom: 36px;
			box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);

			.photo {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.content {
			padding: 0 35px;

			.ipt {
				width: 273px;
				height: 18px;
				padding: 16px;
				margin-top: 12px;
				margin-bottom: 12px;
				border-radius: 20px;
				color: #333;
				box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
			}

		}

		.btn {
			width: 272px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			padding: 0 14px;
			margin-top: 48px;
			border-radius: 10px;
			background-color: #354E44;
			color: #fff;
		}
	}
</style>
